import React, { Component } from 'react'
import { InputNumber, Select } from 'antd'
import CusInputNumber from '@/components/CusInputNumber';
import styles from './Input.less'
const { Option } = Select;
class InputSelect extends Component {
  state = {
    label: '',
    value: '',
    addonLabel: '',
    addonValue: 'DAY',
  }
  componentDidMount() {
    const { value, label = 'key', addonLabel = 'addon' } = this.props
    this.setState({ value: value[label], addonValue: value[addonLabel], label, addonLabel, ...value })
  }
  // componentWillReceiveProps({ value, label = 'key', addonLabel = 'addon' }) {
  //   this.setState({ value: value[label], addonValue: value[addonLabel], label, addonLabel, ...value })
  // }
  handleChange = (value) => {
    const { onChange } = this.props
    const { label } = this.state
    let object = { [label]: value }
    this.setState({ value, ...object })

    onChange(Object.assign({}, this.state, object, value))

  }
  handleAddonChange = value => {
    const { onChange } = this.props
    const { addonLabel } = this.state
    let object = { [addonLabel]: value }
    this.setState({ addonValue: value, ...object })
    onChange(Object.assign({}, this.state, object))

  }
  render() {
    const { addon = [{ name: '' }], value, width = 264 } = this.props;
    const { addonValue } = this.state
    let addonWidth = addonValue === 'HOUR' ? '72px' : '60px'
    return (
      <div className={styles.cusInputBox} style={{ width: `${width}px` }}>
        <InputNumber
          max={99999}
          min={1}
          precision={0}
          style={{ flex: 1 }}
          onChange={this.handleChange}
          value={value.estimatedTime}></InputNumber>
        <div className={styles.selectBox}>
          <Select defaultValue={addonValue} value={addonValue} style={{ width: addonWidth }} onChange={this.handleAddonChange}>
            {addon.filter(item => item.code !== 'WEEK' && item.code !== 'MONTH').map(item => (
              <Option key={item.code} value={item.code}>
                {item.name}
              </Option>
            ))}
          </Select>
        </div>
      </div>
    )
  }
}

export default InputSelect
